<template>
  <div style="margin-left: 10px">
    <a-spin :spinning="spinning">
      <a-row>
        <a-space>
          POE交换机IP:<span style="width: 300px; margin-left: 5px">{{
            ip
          }}</span>
          <a-button @click="refresh">刷新</a-button>
        </a-space>
      </a-row>
      <a-row style="margin-top: 15px">
        <a-table :columns="columns" :data-source="datas" size="small">
          <span slot="connected" slot-scope="text">
            <a-icon
              type="check-circle"
              v-if="text === 'connected'"
              theme="twoTone"
              two-tone-color="#52c41a"
            />
            <a-icon type="disconnect" v-else />
            <span v-if="text === 'connected'" style="color: green">使用中</span>
            <span v-else style="color: gray">未连接</span>
          </span>
          <span slot="Detecting" slot-scope="text">
            <span v-if="text == 'Disable'" style="color: gray"
              ><a-icon type="pause-circle" />禁用POE</span
            >
            <span v-else-if="text == 'Powering'" style="color: #77d1ff"
              ><a-icon type="fire" />供电</span
            >
            <span v-else style="color: gray"
              ><a-icon type="loading" />等待</span
            >
          </span>
          <span slot="type" slot-scope="text">
            <span v-if="text == 'Copper'" style="color: green">电口</span>
            <span v-else style="color: #77d1ff"
              ><a-icon type="thunderbolt" />光口</span
            >
          </span>
          <template slot-scope="text, record" slot="operation">
            <a-switch
              :disabled="record.Type !== 'Copper'"
              size="small"
              @change="onSwitch(record)"
              v-model="record.enabled"
            ></a-switch>
          </template>
        </a-table>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
const columns = [
  {
    title: "网口名称",
    dataIndex: "Interface",
    key: "Interface",
  },
  {
    title: "连接状态",
    dataIndex: "Connect Status",
    key: "Connect Status",
    scopedSlots: { customRender: "connected" },
    //connected
  },
  {
    title: "POE启动状态",
    dataIndex: "Power status",
    key: "Power status",
    scopedSlots: { customRender: "Detecting" },
  },
  {
    title: "类型",
    dataIndex: "Type",
    key: "Type",
    scopedSlots: { customRender: "type" },
  },

  {
    title: "电压",
    dataIndex: "Voltage",
    key: "Voltage",
  },
  {
    title: "电流",
    dataIndex: "Current",
    key: "Current",
  },
  {
    title: "当前功率",
    dataIndex: "Current power",
    key: "Current power",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
import { ctrlService } from "@/services/ctrl";
export default {
  data() {
    return {
      ip: "192.168.0.200",
      columns,
      datas: [],
      spinning: false,
    };
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      let thing = this.$store.state.thingView.activeThing;
      if (thing && thing.info) {
        let self = this;
        this.ip = thing.info.Params.poe;
        if (!this.ip) {
          self.$message.info("请检查poe地址是否配置", 5);
          return;
        }
        this.spinning = true;
        this.datas = [];
        ctrlService(thing.tid, "getPOEState")
          .then((res) => {
            console.log(res);
            let result = res?.result;
            self.datas = [];
            console.log("*****************", result);

            for (let item in result) {
              if (item == "poe_addr") {
                self.ip = result[item];
              } else {
                result[item].enabled =
                  result[item]["Power status"] !== "Disable";
                self.datas.push(result[item]);
              }
            }
            self.datas.sort((a, b) => {
              if (a && a.Interface && b && b.Interface) {
                let partas = a.Interface.split("/");
                let partbs = b.Interface.split("/");
                if (partas.length == 2 && partbs.length == 2) {
                  return parseInt(partas[1]) - parseInt(partbs[1]);
                }
              }

              return a?.Interface < b?.Interface;
            });
          })
          .catch((err) => {
            console.log("0000000", err);
            self.$message.error("请检查poe地址是否配置", 5);
            self.datas = [];
            self.ip = "";
          })
          .finally(() => {
            self.spinning = false;
          });
      }
    },
    setState(item, state) {
      console.log("---------", item);
      let self = this;
      if (item.Interface) {
        let pos = item.Interface.indexOf("gi");
        if (pos >= 0) {
          let mark = item.Interface.substring(pos + 2);
          let thing = this.$store.state.thingView.activeThing;
          this.spinning = true;
          ctrlService(thing.tid, "enablePOE", { no: mark, state: state })
            .then((res) => {
              console.log(res);
            })
            .finally(() => {
              self.spinning = false;
              self.refresh();
            });
        }
      }
    },
    onSwitch(item) {
      if (item.enabled) {
        this.setState(item, "enable");
      } else {
        this.setState(item, "disable");
      }
    },
    disable(item) {
      this.setState(item, "disable");
    },
    enable(item) {
      this.setState(item, "enable");
    },
  },
};
</script>